<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- «  » 分页  #4CAF50  #ddd -->
    <style>
        ul {
            display: flex;
        }

        ul li {
            list-style: none;
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            text-align: center;
            line-height: 50px;
            margin-right: 10px;
        }

        li:hover {
            background-color: #4CAF50;
            color: white;
        }


        .progress {
            width: 100%;
            background-color: blue;
            height: 40px;
        }

        /* 动画效果 */
        @keyframes progressAnimation {
            0% {
                width: 0;
            }

            100% {
                width: 20%;
            }
        }

        .progress-bar {
            width: 20%;
            background-color: #4CAF50;
            height: 40px;
            color: white;
            line-height: 40px;
            text-align: right;
            /* padding-right: 10px; */
            animation: progressAnimation 2s linear;
        }



        .progress-two {
            width: 100%;
            height: 40px;
            background-color: blue;
        }

        .progress-bar-two {
            width: 60%;
            height: 40px;
            background: green;
            color: white;
            text-align: center;
            line-height: 40px;
            animation: progresstwo 6s linear;
        }
        @keyframes progresstwo{
            0%{
                width: 0%;
            }
            100%{
                width: 60%;
            }
        }
    </style>

    <ul>
        <li>«</li>
        <li style="background-color: #4CAF50;">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>»</li>
    </ul>
    <!-- 进度条 -->

    <div class="progress">
        <p class="progress-bar">20%</p>
    </div>
    <p></p>

    <div class="progress-two">
        <div class="progress-bar-two">60%</div>
    </div>



</body>

</html>